<style type="text/css">
    table td .checkbox label{padding-left: 25px}
    table td{vertical-align: top !important}
</style>
<br>
<br>
<br>
<div class="row">
    <div class="col-xs-12 col-md-12">
        <div class="grid simple">
            <div class="grid-body no-border">
                <form id="add-beauty-form" action="<?= DOMAIN.'beauty/edit/'.$beauty['beauty_id'] ?>" method="POST" enctype="multipart/form-data"> 
                    <div class="row">
                        <h4>标题 *</h4>
                        <div class="row form-row">
                            <div class="col-xs-4 col-md-4">
                                <input type="text" value="<?= $beauty['title'] ?>" name="title" class="form-control" placeholder="最少1个字最多20个字">
                            </div> 
                        </div>
                        <br>
                        <br>
                        <h4>封面 *（最好为600*350）</h4>
                        <img class="goods-img" src="<?= FRONTEND_DATA_DOMAIN.'beauty/'.$beauty['cover_img'] ?>" />
                        <br>
                        <br>
                        <input type="file" name="cover_img" /> 
                        <br>
                        <br>

                        <h4>详细图片 *</h4>
                        <table id="beauty-detail-img" class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>
                                        序号
                                    </th>
                                    <th>
                                        图片
                                    </th>
                                    <th>
                                        上传新图片
                                    </th>
                                    <th>
                                        操作
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                    <? if($beauty['detail_img']): ?>
                                        <? $i= 1; ?>
                                        <? foreach($beauty['detail_img'] as $img): ?>
                                        <tr>
                                            <td>
                                                <span class="img-num">图片<em><?= $i ?></em></span>
                                            </td>
                                            <td>
                                               <img width="100px" height="100px" class="goods-img" src="<?= FRONTEND_DATA_DOMAIN.'beauty/'.$img['img'] ?>" />
                                            </td>
                                            <td>
                                                <input type="file" class="detail-img" name="detail_img_<?= $i ?>" /> 
                                                <input type="hidden" name="detail_img_<?=$i ?>_origin" value="<?= $img['img'] ?>">
                                            </td>
                                            <td>
                                                <a onclick="$.Beauty.del('<?= $img['beauty_detail_id']?>');" href="javascript:void(0)">
                                                    <i class="icon-trash"></i>
                                                    删除
                                                </a>
                                            </td>
                                        </tr>
                                        <? $i++ ?>
                                        <? endforeach ?>
                                    <? else: ?>
                                        <tr>
                                            <td>
                                                <span class="img-num">图片<em>1</em></span>
                                            </td>
                                            <td>
                                                
                                            </td>
                                            <td>
                                                <input type="file" class="detail-img" name="detail_img_1" /> 
                                            </td>
                                            <td>
                                                <a onclick="$.Beauty.del('<?= $img['beauty_detail_id']?>');" href="javascript:void(0)">
                                                    <i class="icon-trash"></i>
                                                    删除
                                                </a>
                                            </td>
                                        </tr>
                                    <? endif ?>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="4">
                                        <a onclick="$.Beauty.add();" href="javascript:void(0)">
                                            <i class="icon-plus"></i>
                                            增加一个图片
                                        </a>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                        <br>
                        <br>
                    </div>
                    <input type="hidden" name="detail_img_count" value="1" />
                    <div class="form-actions">  
                        <div class="pull-left">
                            <button class="btn btn-success btn-cons" type="submit">
                                <i class="icon-save"></i>&nbsp;保存</button>
                            </button>
                            <button class="btn btn-white btn-cons" type="button" onclick="$.T.reset_form(this)">
                                重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $.Beauty = {
        max: '<?= $max_detail_img ?>',

        count: function(){
            $('input[name="detail_img_count"]')
                .val($('#beauty-detail-img').find('tbody').find('.detail-img').length);
        },

        del: function(sn)
        {
            var num    = $('#beauty-detail-img').find('.detail-img').length;

            if($.T.to_int(num) <= 1)
            {
                $.T.alert('每篇美妆课堂起码要有一张详情图片。');
                return;
            }

            if($.T.confirm('确认要删除这张详情图片？', function(){
                $.getJSON($.G.domain+"beauty/del_detail_img/"+sn+"/?is_ajax=1", function(response)
                {
                    if( false == response.status)
                    {
                        $.T.alert(response.msg);
                    }
                    else
                    {
                        $.T.refresh();
                    }
                });
            }));
        },

        add: function()
        {
            var target = $('#beauty-detail-img').find('tbody');
            var tpl    = $('#beauty-detail-img').find('tbody').find('tr').eq(0).clone();
            var num    = target.find('.detail-img').length+1;

            if($.T.to_int(num) >= $.Beauty.max)
            {
                $.T.alert('每篇美妆课堂最多只能添加'+$.Beauty.max+'张图片。');
                return;
            }

            tpl
                .wrap('<tr></tr>')
                .find('em')
                .html(num);

            tpl
                .find('input')
                .attr('name','detail_img_'+num);

            tpl
                .find('img')
                .remove();

            target
                .append(tpl);

            $.Beauty.count();

            return;
        }
    }
</script>